<template>
    <div class="btn-content-box">
        <div class="attr-item btn-text">
            <div class="attr-item-label">文本</div>
            <div class="block">
                <el-input v-model="content.value" size="mini"/>
            </div>
        </div>
        <div class="attr-item btn-link-to">
            <div class="attr-item-label">跳转至</div>
            <div class="block">
                <el-input v-model="content.link" size="mini" placeholder="请输入正确的链接"/>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'BtnContent',
        props: {
            content: {
                type: Object,
                default: {
                    value: '按钮文本',
                    link: ''
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .btn-content-box {
        .attr-item {
            height: 38px;
            display: flex;
            overflow: hidden;
            margin-top: 10px;

            .attr-item-label {
                padding-right: 12px;
                line-height: 28px;
            }
            .block {
                flex: 1;
            }
        }
        .btn-text {
            .attr-item-label {
                padding-right: 26px;
            }
        }
    }
</style>
